<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*为div的子元素span设置一个字体颜色红色
			 * （为div直接包含的span设置一个字体颜色）
			 * 
			 * 子元素选择器
			 * 		作用：选中指定父元素的指定子元素
			 *      语法：父元素>子元素
			 */
			/*div>span{
					color:pink;
			}*/
			
			
			/*
			 后代选择器：
			 		作用：选中指定元素的后代选择器
			 		语法：祖先 后代			 * 
			 * */
			
			/*div span,p{
				color:red;
			}
			div p span{
				color: orange;
			}
			*/
			/*选择下一个兄弟
			 	语法：前一个+下一个
			 选择下边的所有兄弟
			 	语法：兄~弟
			*/
			p+span{
				color: blue;
			}
			/*p~span{
				color: green;
			}*/
		</style>
	</head>
	<body>
		<!--
			父元素：直接包含子元素的元素叫父元素
			子元素：直接被父元素包含的元素叫子元素
			祖先元素：直接或间接包含后代元素的元素叫祖先元素
					   一个元素的父元素也是它的祖先元素
			后代元素：直接或间接被祖先元素包含的元素叫后代元素
					子元素也是后代元素
			兄弟元素：拥有相同父元素的元素是兄弟元素
		
		-->
		<div>
			我是一个div
		<p>
			我是div中的p元素
			<span>我是p元素中的span</span>
		</p>
		<span>我是div中的span</span>
		<span>我是div中的span</span>
		<span>我是div中的span</span>
		</div>
	</body>
</html>
